<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app';
import { useOrderStore } from '@/stores';

const orders = ref<any>([]);
const orderStore = useOrderStore();

onLoad(() => {
	fetchData();
});

async function fetchData() {
	orders.value = await orderStore.getOrders();
}
</script>

<template>
	<x-container direction="vertical" min-height="100vh" bg-color="#F8F8F8" padding="40rpx 32rpx" gap="32rpx">
		<x-space direction="vertical" align="center">
			<x-text color="#0023AD" :size="36" bold>待使用</x-text>
			<x-text :size="24">商品购买成功，待使用</x-text>
		</x-space>
		<x-card style="border-radius: 16rpx" :body-style="{ padding: '32rpx' }">
			<x-container gap="20rpx">
				<x-image width="160rpx" height="160rpx"></x-image>
				<x-container direction="vertical" justify="between">
					<x-space direction="vertical" align="start" :size="10">
						<x-text :size="28" :line-height="36" bold>小蓝教育 1v1 全辅导 小初高全托 1...</x-text>
						<x-tag>免预约</x-tag>
					</x-space>
					<x-container justify="between">
						<x-text>x1</x-text>
						<dlk-currency :value="399" color="#FA5732" :size="36"></dlk-currency>
					</x-container>
				</x-container>
			</x-container>
			<x-divider></x-divider>
			<x-container justify="end">
				<x-button type="primary" shape="round" outline>查看券码</x-button>
			</x-container>
		</x-card>
		<x-card style="border-radius: 16rpx" :body-style="{ padding: '32rpx' }">
			<x-text color="#3E3E3E" :size="28">订单详情</x-text>
			<x-divider></x-divider>
			<x-container direction="vertical" gap="28rpx">
				<x-container justify="between">
					<x-text color="#3E3E3E" :size="24">购买数量</x-text>
					<x-text color="#000000" :size="24" bold>1份</x-text>
				</x-container>
				<x-container justify="between">
					<x-text color="#3E3E3E" :size="24">订单总额</x-text>
					<x-text color="#000000" :size="24" bold>¥399</x-text>
				</x-container>
				<x-container justify="between">
					<x-text color="#3E3E3E" :size="24">实付金额</x-text>
					<x-text color="#000000" :size="24" bold>¥399</x-text>
				</x-container>
				<x-container justify="between">
					<x-text color="#3E3E3E" :size="24">订单号码</x-text>
					<x-text color="#000000" :size="24" bold>7896213781267</x-text>
				</x-container>
				<x-container justify="between">
					<x-text color="#3E3E3E" :size="24">下单时间</x-text>
					<x-text color="#000000" :size="24" bold>2025-07-06 07:36:52</x-text>
				</x-container>
				<x-container justify="between">
					<x-text color="#3E3E3E" :size="24">支付方式</x-text>
					<x-text color="#000000" :size="24" bold>微信支付</x-text>
				</x-container>
			</x-container>
		</x-card>
	</x-container>
</template>

<style lang="scss" scoped></style>
